<template>
  <div class="talentRecruitment">
    <div class="headertop">
      <div class="warpContent">
        <div class="title">实力团队</div>
        <div class="subtitle">生意港诚邀您的加入</div>
      </div>
    </div>
    <div class="content">
      <div class="corporateWelfare">
        <div class="title">公司福利</div>
        <div class="itemwarp">
          <div class="item">
            <img src="/image/talentRecruitment/item1.png" alt="" />
            <p>上海市五险一金</p>
            <p>额外商业保险</p>
          </div>
          <div class="item">
            <img src="/image/talentRecruitment/item2.png" alt="" />
            <p>享受餐补、交通补贴</p>
            <p>月度奖金+项目提成</p>
          </div>
          <div class="item">
            <img src="/image/talentRecruitment/item3.png" alt="" />
            <p>新人入职即享</p>
            <p>全程一对一带薪培训</p>
          </div>
          <div class="item">
            <img src="/image/talentRecruitment/item4.png" alt="" />
            <p>晋升机制透明</p>
            <p>公司提拔优先考虑内部员工</p>
          </div>
        </div>
      </div>
      <div class="workEnvironment">
        <div class="title">工作环境</div>
        <div class="contentwarp">
          <p>
            良好的办公环境，独栋办公大楼。庭院草坪、阳光露台、负一层员工休息活动区域。
          </p>
          <p>
            丰富的团队活动，轻松的人文氛围。月度表彰大会、周三活动日、节日特别活动以及多彩的社团活动。
          </p>
        </div>
        <carousel-3d
          class="carouselwarp"
          :autoplay="true"
          :border="0"
          :autoplayHoverPause="true"
          :width="803"
          :height="510"
          :controlsVisible="true"
        >
          <slide :index="0">
            <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/carousel1.png-1593655178000" alt="" />
          </slide>
          <slide :index="1">
            <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/carousel2.png-1593655181000" alt="" />
          </slide>
          <slide :index="2">
            <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/carousel3.png-1593655184000" alt="" />
          </slide>
        </carousel-3d>
      </div>
      <div class="recruitmentInformation">
        <div class="warpliItem">
          <div
            v-for="li in liArr"
            :key="li.inner"
            @click="changeCurrentLi(li)"
            :class="[li.key === currentKey ? 'liItem activeItem' : 'liItem']"
          >
            {{ li.inner }}
          </div>
        </div>
        <div class="showContentWarp">
          <div v-for="item in list" :key="item.title" class="itembox">
            <div class="topBox">
              <div class="leftbox">
                <p class="title">{{ item.post }}</p>
                <p class="subtitle">{{ item.requirement }}</p>
              </div>
              <div class="rightbox">
                <div class="btn" @click="jump(item.id)">了解详情</div>
              </div>
            </div>
            <div class="bottombox">
              <div class="address">地点：{{ item.address }}</div>
              <div class="tags" v-html="getTags(item.label)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  async mounted() {
    let list = [];
    let { data } = await axios.post(
      "/officialwebsiteapi/recruitment/apiGetInformations",
      {
        keyword: "",
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 100,
          skipCount: 0
        },
        type: 0
      }
    );
    if (data.code === 1000) {
      list = data.data.items.items;
    }
    this.list= list
  },
  data() {
    return {
      liArr: [
        {
          inner: "招纳贤才",
          key: "招纳贤才",
          type: 0
        },
        {
          inner: "社会招聘",
          key: "社会招聘",
          type: 1
        },
        {
          inner: "校园招聘",
          key: "校园招聘",
          type: 2
        }
      ],
      list:[],
      currentKey: "招纳贤才",
      type: ""
    };
  },
  methods: {
    getdata() {
      axios
        .post("/officialwebsiteapi/recruitment/apiGetInformations", {
          keyword: "",
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 100,
            skipCount: 0
          },
          type: this.type
        })
        .then(res => {
          if (res.data.code === 1000) {
            this.list = res.data.data.items.items;
          }
        });
    },
    changeCurrentLi(res) {
      this.type = res.type;
      this.currentKey = res.key;
      this.getdata();
    },
    jump(id) {
      this.$router.push({ path: "/talentRecruitmentList", query: { id } });
    },
    getTags(res) {
      if (res.length) {
        let html = "";
        res.split(",").map(v => (html += `<span>${v}</span>`));
        return html;
      }
      return ``;
    }
  }
};
</script>
<style lang="scss" scoped>
.talentRecruitment {
  .headertop {
    width: 100%;
    height: 688px;
    background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/talentRecruitmentbg.png-1593655211000")no-repeat;
    background-size: 100% 100%;
    .warpContent {
      margin: 0 auto;
      width: 1200px;
      padding-top: 260px;
      text-align: right;
    }
    .title {
      padding-right: 92px;
      font-size: 80px;
      color: #fff;
      font-weight: 700;
    }
    .subtitle {
      margin-top: 16px;
      padding-right: 104px;
      font-size: 42px;
      letter-spacing: 4px;
      color: #ffffff;
    }
  }
  .workEnvironment,
  .corporateWelfare {
    .title {
      margin-top: 84px;
      font-size: 33px;
      letter-spacing: 2px;
      color: #313131;
      border-bottom: 4px solid rgba(109, 113, 253, 1);
    }
  }
  .corporateWelfare {
    display: flex;
    flex-direction: column;
    align-items: center;
    .itemwarp {
      margin-top: 75px;
      display: flex;
      justify-content: center;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        img {
          width: 101px;
          height: 102px;
        }
        p {
          font-size: 25px;
          letter-spacing: 1px;
          color: #313131;
        }
        p:first-of-type {
          margin-top: 24px;
        }
      }
      div:first-of-type {
        margin-right: 76px;
      }
      div:nth-of-type(2) {
        margin-right: 120px;
      }
      div:nth-of-type(3) {
        margin-right: 85px;
      }
    }
  }
  .workEnvironment {
    display: flex;
    flex-direction: column;
    align-items: center;
    .contentwarp {
      margin-top: 50px;
      text-align: center;
      font-size: 25px;
      line-height: 44px;
      letter-spacing: 1px;
      color: #313131;
    }
  }
  .carouselwarp {
    margin-top: 88px;
    width: 1200px;
    /deep/ .next,
    /deep/ .prev {
      color: #fff;
    }
  }
  .recruitmentInformation {
    margin-bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .warpliItem {
      display: flex;
      .liItem {
        font-size: 33px;
        letter-spacing: 2px;
        color: #313131;
        line-height: 52px;
        border: solid 2px #6d71fd;
        padding: 0 24px;
      }
      div:nth-of-type(2) {
        border-left: none;
        border-right: none;
      }
      .activeItem {
        color: #ffffff;
        background-color: #6d71fd;
      }
    }
    .showContentWarp {
      width: 1086px;
      .itembox {
        margin-top: 44px;
        box-shadow: 1px 1px 10px 0px rgba(43, 96, 221, 0.2);
      }
      .topBox,
      .bottombox {
        padding: 0 40px 0 56px;
        display: flex;
        justify-content: space-between;
      }
      .topBox {
        padding-top: 30px;
      }
      .bottombox {
        line-height: 73px;
        background-color: #f8f8f9;
      }
      .address {
        font-size: 25px;
        letter-spacing: 1px;
        color: #6b6b6b;
      }
      .tags {
        font-size: 25px;
        letter-spacing: 1px;
        color: #6b6b6b;
        /deep/ span {
          padding: 0 8px;
          background-color: #ffffff;
          border-radius: 20px;
          border: solid 2px #d1d1d1;
          margin-left: 20px;
        }
      }
      .title {
        font-size: 33px;
        letter-spacing: 3px;
        color: #313131;
      }
      .subtitle {
        margin-top: 12px;
        margin-bottom: 16px;
        font-size: 25px;
        letter-spacing: 1px;
        color: #6b6b6b;
      }
      .btn {
        cursor: pointer;
        text-align: center;
        line-height: 55px;
        width: 234px;
        height: 55px;
        border-radius: 15px;
        border: solid 2px #6d71fd;
        font-size: 33px;
        letter-spacing: 3px;
        color: #313131;
      }
    }
  }
}
</style>
